<template>
  <view
    ref="oNavBar"
    :style="{ ...define_style, color: theme }"
    class="nav-bar"
  >
    <view class="nav-bar-left" :style="left_right_style" @click="onBack()">
      <view class="icon iconfont icon-31fanhui1"></view>
    </view>
    <view class="nav-bar-center">{{ title }}</view>
    <view class="nav-bar-right" :style="left_right_style"></view>
  </view>
</template>

<script lang="ts" setup>
import { getSystemInfo } from "@/utils/tools";

import { ref, onMounted } from "vue";

defineProps({
  title: { type: String, default: "" },
  theme: { type: String, default: "#424242" },
});

//  页面加载 获取胶囊的参数

onMounted(async () => {
  setNavBar();
});

const define_style = ref({});
const left_right_style = ref({});

//  设置navbar的样式
async function setNavBar() {
  //  屏幕尺寸
  const { screenWidth } = await getSystemInfo();
  //  获取胶囊信息
  const { height, width, right, top } = uni.getMenuButtonBoundingClientRect();

  // const dom: any =  await getDom("#nav-bar", instance);
  define_style.value = {
    height: height + "px",
    top: top + "px",
  };

  left_right_style.value = {
    width: screenWidth - right + width + "px",
  };
}

const onBack: any = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.nav-bar {
  position: absolute;
  left: 0;
  display: flex;
  width: 100%;
  z-index: 10;

  .nav-bar-left,
  .nav-bar-right {
    display: flex;
    align-items: center;
  }

  .nav-bar-left {
    .icon {
      margin-left: 44rpx;
      font-size: 36rpx;
    }
  }

  .nav-bar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
